<template>
	<div class="live-contents">
		<div class="header">
			<top-bar :barObj="barObj" />
		</div>
		<ul>
			<li>
				<span>音频</span>
				<span>{{audio?'开':'关'}}</span>
			</li>
		</ul>
		<ul>
			<li>
				<span>直播间名称</span>
				<input v-model="name" type="text" placeholder="请输入直播名">
			</li>
			<li>
				<span>直播封面</span>
				<span @click="select()">{{live && avatar !== live.cover ? '已选择' : '选择'}}</span>
			</li>
			<li>
				<span>清晰度</span>
				<span>{{modes[mode]}}</span>
			</li>
		</ul>
		<div class="save-btn" @click="save()">确定</div>
	</div>
</template>

<script>
	import {
		Toast,
		MessageBox
	} from "mint-ui";
	import html5plus from "../../utils/html5plus.js";
	import {
		getLiveInfo,
		createLive,
		updateLiveName,
		updateLiveAvatar
	} from "../../api.js";
	import {
		getGuid
	} from "@/utils/index";
	import topBar from "@/components/topBar";
	export default {
		name: "live_edit",
		data() {
			return {
				barObj: {
					isBack: true,
					backVal: "游戏",
					title: "直播设置",
					isIcon: true
				},
				live: null,
				modes: {
					SD: "标清",
					HD: "高清",
					FHD: "超清"
				},
				mode: localStorage.live_mode || "HD",
				audio: localStorage.live_audio || true,
				name: "",
				avatar: "",
				userInfo2: null
			};
		},
		components: {
			topBar
		},
		mounted() {
			this.userInfo2 = JSON.parse(localStorage.userInfo2 || "false");
			if (!localStorage.zyUserId || !this.userInfo2) {
				MessageBox.confirm("去登录?").then(action => {
					this.$router.push("/login");
				});
				return;
			}
			//获取直播数据
			getLiveInfo({
				accid: this.userInfo2.yx_user.yx_accid,
				machine_id: getGuid(),
				token: this.userInfo2.token,
				version: "H3.0.0"
			}).then(res => {
				if (res.data.code == 4040026) {
					//没有直播
					this.$router.push("/live/edit");
				} else if (res.data.code != 200) {
					Toast({
						message: res.data.msg,
						duration: 2000
					});
				} else {
					this.live = res.data.data[0];
					this.name = this.live.name;
					this.avatar = this.live.cover;
				}
			});
		},
		methods: {
			select() {
				html5plus.plusready(
					() => {
						plus.gallery.pick(
							filepath => {
								var reader = new plus.io.FileReader();
								reader.onloadend = e => {
									this.avatar = e.target.result; //base64图片
								};
								reader.readAsDataURL(filepath);
							},
							() => {
								MessageBox.alert("打开相册失败");
							}, {
								filter: "image",
								maximum: 1
							}
						);
					},
					() => {
						MessageBox.alert("请下载APP进行操作！");
					}
				);
			},
			save() {
				if (this.live) {
					if (this.name !== this.live.name) {
						//修改
						updateLiveName({
							name: this.name,
							cid: this.live.cid,
							machine_id: getGuid(),
							token: this.userInfo2.token,
							version: "H3.0.0"
						}).then(res => {
							Toast({
								message: res.data.msg || "出错了！",
								duration: 2000
							});
						});
					}
					if (this.avatar !== this.live.cover) {
						updateLiveAvatar({
							avatar: this.avatar,
							cid: this.live.cid,
							machine_id: getGuid(),
							token: this.userInfo2.token,
							version: "H3.0.0"
						}).then(res => {
							Toast({
								message: res.data.msg || "出错了！",
								duration: 2000
							});
						});
					}
					if(this.avatar == this.live.cover && this.name == this.live.name){
						Toast({
							message: "没有修改内容！",
							duration: 2000
						});
					}
				} else {
					//创建
					if (/^\s*$/.test(this.name)) {
						Toast({
							message: "直播名必填！",
							duration: 2000
						});
						return;
					}
					createLive({
						name: this.name,
						avatar: this.avatar,
						accid: this.userInfo2.yx_user.yx_accid,
						machine_id: getGuid(),
						token: this.userInfo2.token,
						version: "H3.0.0"
					}).then(res => {
						if (res.data.code == 200) {
							this.live = res.data.data;
						}
						Toast({
							message: res.data.msg || "出错了！",
							duration: 2000
						});
					});
				}
			}
		}
	};
</script>

<style lang="stylus" scoped>
	.header {
		height: 1rem;
		background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
		display: flex;
		align-items: center;

		.topBar {
			display: flex;
			text-align: center;
			justify-content: space-around;
			color: #fff;

			.bar {
				flex: 1;
				margin: 0 20px;
				font-size: 17px;
			}

			.bar:nth-child(1) {
				text-align: left;
				font-size: 15px;
			}

			.bar:nth-child(3) {
				text-align: right;
			}
		}
	}

	.live-contents ul {
		width: 100%;
		margin: 0.2rem 0;
		list-style: none;
		padding: 0;
	}

	.live-contents ul input {
		text-align: right;
	}

	.live-contents ul li {
		height: 1rem;
		line-height: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		margin: 2px 0;
		padding: 0 0.3rem;
		color: #0D0D0D;
		font-size: 0.3rem;
	}

	.save-btn {
		width: 90%;
		height: 1rem;
		background-color: #228FF8;
		text-align: center;
		line-height: 1rem;
		margin: auto;
		color: white;
		font-size: 0.3rem;
		margin-top: 0.5rem;
	}
</style>
